<template>
  <div class="my-articles-container">
    <div class="page-header">
      <h1>我的文章</h1>
      <a-button type="primary" @click="createNewArticle">
        <template #icon><PlusOutlined /></template>
        写文章
      </a-button>
    </div>
    
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="published" tab="已发布">
        <article-list 
          :articles="publishedArticles" 
          :loading="loading" 
          @edit="editArticle" 
          @view="viewArticle"
          @delete="deleteArticle"
        />
      </a-tab-pane>
      <a-tab-pane key="draft" tab="草稿">
        <article-list 
          :articles="draftArticles" 
          :loading="loading" 
          @edit="editArticle" 
          @view="viewArticle"
          @delete="deleteArticle"
        />
      </a-tab-pane>
    </a-tabs>
    
    <div class="pagination" v-if="total > 0">
      <a-pagination
        :current="current"
        :page-size="pageSize"
        :total="total"
        show-size-changer
        @change="handlePageChange"
        @showSizeChange="handleSizeChange"
      />
    </div>
    
    <!-- 确认删除对话框 -->
    <a-modal
      v-model:visible="deleteModalVisible"
      title="确认删除"
      okText="删除"
      cancelText="取消"
      @ok="confirmDelete"
    >
      <p>确定要删除文章"{{ articleToDelete?.title }}"吗？此操作不可恢复。</p>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { getUserArticles, deleteArticle as deleteArticleApi } from '@/api/article';
import ArticleList from '@/components/ArticleList.vue';

const router = useRouter();
const loading = ref(false);
const articles = ref([]);
const total = ref(0);
const current = ref(1);
const pageSize = ref(10);
const activeTab = ref('published');
const deleteModalVisible = ref(false);
const articleToDelete = ref(null);

// 计算已发布和草稿文章列表
const publishedArticles = computed(() => {
  return articles.value.filter(article => article.status === 1);
});

const draftArticles = computed(() => {
  return articles.value.filter(article => article.status === 0);
});

// 监听标签切换，重置分页
watch(activeTab, () => {
  current.value = 1;
  fetchArticles();
});

onMounted(() => {
  fetchArticles();
});

const fetchArticles = async () => {
  loading.value = true;
  try {
    const status = activeTab.value === 'published' ? 1 : 0;
    const response = await getUserArticles({
      pageNum: current.value,
      pageSize: pageSize.value,
      status
    });
    
    articles.value = response.records || [];
    total.value = response.total || 0;
  } catch (error) {
    console.error('获取文章列表失败:', error);
    message.error('获取文章列表失败');
  } finally {
    loading.value = false;
  }
};

const handlePageChange = (page, pageSize) => {
  current.value = page;
  fetchArticles();
};

const handleSizeChange = (current, size) => {
  pageSize.value = size;
  fetchArticles();
};

const createNewArticle = () => {
  router.push('/user/article/edit');
};

const editArticle = (article) => {
  router.push(`/user/article/edit/${article.id}`);
};

const viewArticle = (article) => {
  router.push(`/article/${article.id}`);
};

const deleteArticle = (article) => {
  articleToDelete.value = article;
  deleteModalVisible.value = true;
};

const confirmDelete = async () => {
  if (!articleToDelete.value) return;
  
  try {
    await deleteArticleApi(articleToDelete.value.id);
    message.success('文章删除成功');
    fetchArticles();
  } catch (error) {
    console.error('删除文章失败:', error);
    message.error('删除文章失败');
  } finally {
    deleteModalVisible.value = false;
    articleToDelete.value = null;
  }
};
</script>

<style scoped>
.my-articles-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style> 